<template>
    <div class="footer">
        <Logo fill="#fafafa" />
        <p>Copyright © 2025 SPARQ Inc. All rights reserved.</p>
        <ul class="icons">
            <li v-for="item in data" :key="item.href">
                <a :href="item.href" target="_blank">
                    <img :src="item.url" alt="">
                </a>
            </li>
        </ul>
    </div>
</template>
<script setup>
import Logo from './header/Logo.vue'
import { reactive } from 'vue';

const data = reactive([
  {
    href: '#',
    url: '/instagram-icon.svg',
  },
  {
    href: '#',
    url: '/linkedin-icon.svg',
  },
  {
    href: '#',
    url: '/twitter-icon.svg',
  }
])

</script>
<style scoped>

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fafafa;
  background-color: #030303;
  padding: 30px 50px;
}

.icons {
  display: flex;
  li {
    margin-left: 15px;
  }
  img {
    width: 1vw;
  }
}
</style>